<template>
  <view class="page">
    <div class="pic"
         :class="[{
					on:dehumidifierStatusIsOn
				}]">
      <image src="../../static/on.png"
             class="image"
             mode="widthFix"></image>
    </div>
    <div class="btns">
      <div class="label">
        除湿器使能
      </div>
      <div class="btn"
           @click="toggledehumidifier">
        <div class="con"
             :class="[{
					on:dehumidifierStatusIsOn
				}]">
          <div class="bg"></div>
          <div class="dot">

          </div>
        </div>
      </div>
    </div>
  </view>
</template>
<script>
	const iot = require('common/alibabacloud-iot-device-sdk.js');
	const device = iot.device({
				  productKey: "k1mmmIxElHo", // 将<productKey>修改为实际产品的ProductKey
				  deviceName: "ATH10", // 将<deviceName>修改为实际设备的DeviceName
				  deviceSecret: "b762241b1bbf67495327f0faf5c75296", // 将<deviceSecret>修改为实际设备的DeviceSecret
					brokerUrl: `wxs://iot-06z00bo9njiafxl.mqtt.iothub.aliyuncs.com:443`,
				});
export default {
	

  data() {
     return {
       dehumidifierStatusIsOn: false,
     };
  },
  created() {
	 
  },  
  methods: {
	  async toggledehumidifier() {
	    this.dehumidifierStatusIsOn = !this.dehumidifierStatusIsOn;
	    if(this.dehumidifierStatusIsOn == true)
		{
			this.dehumidifierENABLE();
		}
		if(this.dehumidifierStatusIsOn == false)
		{
			this.dehumidifierNOTENABLE();
		}
	  },
		dehumidifierNOTENABLE() {
		  // 向设备发送 JSON 格式的消息
		  const messageToSend = {
			"id":1723996061249,"params":{"params:heatEND":0},"version":"1.0","method":"thing.event.property.post"
		  };
		  const topic = "/sys/k1mmmIxElHo/ATH10/thing/event/property/post"; // 指定要发送的主题
		  device.publish(topic, JSON.stringify(messageToSend)); // 发布消息到指定主题
		  console.log("Message sent to device:", messageToSend);
		},
		dehumidifierENABLE() {
		  // 向设备发送 JSON 格式的消息
		  const messageToSend = {
			"id":1723996061249,"params":{"params:heatEND":1},"version":"1.0","method":"thing.event.property.post"
		  };
		  const topic = "/sys/k1mmmIxElHo/ATH10/thing/event/property/post"; // 指定要发送的主题
		  device.publish(topic, JSON.stringify(messageToSend)); // 发布消息到指定主题
		  console.log("Message sent to device:",messageToSend);
		}, 		
  },
  }
</script>

<style lang="scss">
.page {
  padding: 40rpx;
  min-height: 100vh;
  background: #f7f7f7;

  .pic {
    margin: 0 auto;
    width: 500rpx;
    height: 500rpx;
    // background: #ccc;
    transition: all 0.3s;
    filter: grayscale(100%);

    &.on {
      filter: grayscale(0%);
    }

    .image {
      width: 100%;
    }
  }

  .btns {
    margin: 20px;
    background: #fff;
    padding: 20px;
    display: flex;
    justify-content: space-between;

    .con {
      position: relative;

      &.on {
        .bg {
          background: #2cb191;
        }

        .dot {
          left: 47rpx;
        }
      }

      .bg {
        width: 90rpx;
        height: 45rpx;
        border-radius: 45rpx;
        background: #ccc;
        transition: all 0.3s;
      }

      .dot {
        position: absolute;
        left: 2rpx;
        top: 2rpx;
        height: 41rpx;
        width: 41rpx;
        border-radius: 50%;
        background: #fff;
        transition: all 0.3s;
      }
    }
  }
}

</style>
 